<template>

    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#fff"
        style="height: 80%; padding-top: 1%">
        <el-menu-item index="1">
            <template #title>
                <el-icon>
                    <home-filled />
                </el-icon>
                <span>首页</span>
            </template>
        </el-menu-item>
        <el-menu-item index="2">
            <template #title>
                <el-icon>
                    <chat-square />
                </el-icon>
                <span>社区</span>
            </template>
        </el-menu-item>
        <el-menu-item index="3">
            <template #title>
                <el-icon>
                    <notebook />
                </el-icon>
                <span>学习</span>
            </template>
        </el-menu-item>
        <el-menu-item index="4">
            <template #title>
                <el-icon>
                    <avatar />
                </el-icon>
                <span>个人</span>
            </template>
        </el-menu-item>
    </el-menu>
</template>
<script lang="ts" setup>
import { ref } from "vue";

const activeIndex = ref("1");
const activeIndex2 = ref("1");
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const searchText = ref("");
</script>